<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/pages/index.css" />
		<style type="text/css">

		</style>
	</head>
 
	<body>
		<div id="app">
			<nav class="mui-bar mui-bar-tab">
				<div v-for="item in list" class="item" :class="item.wid==id?'mui-active':''" :data-wid='item.wid'>
					<img class="item-image animated" :class="item.wid==id? 'bounceIn':'' " :src="item.wid==id?item.selectedIconPath:item.iconPath">
					<span class="" style="">{{item.text}}</span>
				</div>
			</nav>
		</div>

		<script src="js/Width.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/webviewGroup.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/app.js"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()
				(function($, doc) {
					$.plusReady(function() {
						if (!$.os.android) {
							FastClick.attach(document.body);
						}
						$.oldBack = mui.back;
						var backButtonPress = 0;
						if ($.os.ios) { //判断是ios还是安卓设备
							ws = plus.webview.currentWebview();
							ws.setStyle({
								'popGesture': 'none'
							}); //ios关闭右划
						}

						$.back = function(event) {
							backButtonPress++;
							if (backButtonPress > 1) {
								plus.runtime.quit();
							} else {
								plus.nativeUI.toast('再按一次退出应用');
							}
							setTimeout(function() {
								backButtonPress = 0;
							}, 1000);
							return false;
						};


						document.addEventListener("resume", restartCallback1, false);
						document.addEventListener("foreground", restartCallback, false);



						var _self = plus.webview.currentWebview();
						initialize(_self)
						var self = plus.webview.currentWebview();
						self.addEventListener('show', function() {
							initialize(_self)
						})
					});
				}(mui, document));

			function restartCallback1() {
				console.log('resume');
				if (mui.os.ios) {
					// location.reload();
				}
			}

			function restartCallback() {
				console.log('foreground');
				if (mui.os.ios) {
					plus.runtime.restart();
				}
			}

			var app = new Vue({
				el: '#app',
				data: {
					id: 'index1',
					list: [{
						wid: 'index1',
						text: '首页',
						iconPath: 'images/index/home.png',
						selectedIconPath: 'images/index/home_.png',
					}, {
						wid: 'index2',
						text: '发现',
						iconPath: 'images/index/discover.png',
						selectedIconPath: 'images/index/discover_.png',
					}, {
						wid: 'index3',
						text: '友邻',
						iconPath: 'images/index/neighbor.png',
						selectedIconPath: 'images/index/neighbor_.png',
					}, {
						wid: 'index4',
						text: '我的',
						iconPath: 'images/index/user.png',
						selectedIconPath: 'images/index/user_.png',
					}]
				},
				methods: {},
			})

			function initialize(_self) {
				var group = new webviewGroup(_self.id, {
					items: [{
						id: "index1",
						url: "pages/home.html",
						styles: {
							top: '0px', //mui标题栏默认高度为45px；
							bottom: '50px', //默认为0px，可不定义；
							titleNView: { // 窗口的标题栏控件
								titleText: "大管家物业", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								type: 'transparent',
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
							}
						},
						extras: {}
					}, {
						id: "index2",
						url: "pages/discover.html",
						styles: {
							top: '0px', //mui标题栏默认高度为45px；
							bottom: '50px' //默认为0px，可不定义；
						},
						extras: {}
					}, {
						id: "index3",
						url: "pages/neighbor.html",
						styles: {
							top: '0px', //mui标题栏默认高度为45px；
							bottom: '50px' //默认为0px，可不定义；
						},
						extras: {}
					}, {
						id: "index4",
						url: "pages/user.html",
						styles: {
							top: '0px', //mui标题栏默认高度为45px；
							bottom: '50px' //默认为0px，可不定义；
						},
						waiting: {
							autoShow: false
						},
						extras: {}
					}]
				});

				mui(".mui-bar").on("tap", ".item", function(e) {
					var wid = this.getAttribute("data-wid");
					app.id = wid;
					group.switchTab(wid);
				});
			}
		</script>
	</body>

</html>
